<template>
  <cs-card>
    <main>
      <header>
        <el-tabs
          v-model="activeName">
          <el-tab-pane label="实时视频" name="realTime">
            <video-realtime></video-realtime>
          </el-tab-pane>
          <el-tab-pane label="历史回放" name="history">
            <video-surveillance-history/>
          </el-tab-pane>
        </el-tabs>
      </header>
    </main>
  </cs-card>
</template>

<script>
import csCard from '@/components/cs-card/cs-card.vue'
import videoSurveillanceHistory from './cpns/video_surveillance_history.vue'
import VideoRealtime from './cpns/VideoRealtime.vue'

export default {
  components: {
    csCard,
    VideoRealtime,
    videoSurveillanceHistory
  },
  data () {
    return {
      activeName: 'realTime'
    }
  },
  created () {
  },
  computed: {
  },
  watch: {
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.cs-card ::v-deep .el-card__body {
  display: flex;
}

.cs-card {
  height: 80vh;
  min-height: 830px;
}

main {
  width: 100%;
}

header {
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #dddddd;
}

.el-tabs ::v-deep .el-tabs__nav-wrap::after {
  width: 0;
}

.el-tabs ::v-deep .el-tabs__active-bar {
  width: 26px !important;
  left: 16px;
}

.el-tabs ::v-deep .el-tabs__active-bar {
  background-color: #006eff;
}

.el-tabs ::v-deep .el-tabs__item.is-active {
  color: #006eff;
}

.el-tabs ::v-deep .el-tabs__item {
  color: rgba(0, 110, 255, 0.5);
}

.el-tabs ::v-deep .el-tabs__header {
  padding-left: 24px;
  margin: 0;
}
.el-tabs ::v-deep el-tabs__content {
  padding: 0;
}

aside {
  width: 267px;
}

#input_section {
  width: 267px;
  height: 62px;
  background-color: #f5faff;
}

.el-input {
  width: 235px;
  height: 36px;
  margin: 13px 16px;
  border: 1px solid #1585fc;
}

.el-input ::v-deep .el-input__inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border: 0;
}

.el-input ::v-deep .el-input-group__append {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  color: #fff;
  background-color: #1585fc;
  cursor: pointer;
  border: 0;
}

#collapseSection {
  height: 700px;
  border-right: 1px solid #dddddd;
  overflow: scroll;
}

/* 溢出隐藏去掉滚动条 */
#collapseSection::-webkit-scrollbar {
  display: none;
}

.el-collapse-item div {
  border-top: 1px solid #efefef;
  padding: 10px 0;
}

.el-collapse-item ::v-deep .el-collapse-item__content {
  padding-bottom: 0;
}

</style>
